<template>
	<div :id="chartId" ref="polarBar" class="polar-bar"></div>
</template>
<script>
import * as echarts from 'echarts'
import {polarBarOptions, resizeChart} from "@/assets/js/echartOptions.js";
export default {
	name: 'polarBar',
	data(){
		return {
			polarBarChart: null,
			options: {}
		}
	},
	watch: {
		$props: {
			handler(val) {
				this.$nextTick(() => {
					let ele = document.querySelector('#' + this.chartId);
					if (this.polarBarChart == null) {
						this.polarBarChart = echarts.init(ele);
					}
					this.polarBarChart.clear();
					this.polarBarChart.setOption(polarBarOptions({
						...val
					}), true, true);

					this.polarBarChart.resize();
					resizeChart(this.polarBarChart);
				})
			},
			deep: true,
			immediate: true
		}
	},
	props: {
		chartId: {
			type: String,
			default: 'polarBarChart'
		},
		// 是否显示鼠标经过的效果
		isShowTooltip: {
			type: Boolean,
			default: false
		},
		color: {
			type: Array,
			default: () => ['#4A90E5', '#73C7FA', '#9FDA63', '#FFA944', '#7A73FA', '#FF7474']
		},
		// x轴数据
		angleAxis: {
			type: Array,
			default: () => ['Mon', 'Tue', 'Wed', 'Thu']
		},
		// 数据
		data: {
			type: Array,
			default: () => []
		},
		// 图例单位
		legendUnit: {
			type: String,
			default: '人'
		},
		// 图例的摆放位置 水平 horizontal | 垂直 vertical
		orient: {
			type: String,
			default: 'vertical'
		},
		legendLeft: {
			type: String,
			default: '60%'
		},
		angleAxisMin: {
			type: Number,
			default: 3
		},
		legendItemGap: {
			type: Number,
			default: 10
		}
	},
	mounted(){
		this.options = {
			isShowTooltip: this.isShowTooltip,
			angleAxis: this.angleAxis,
			data: this.data,
			legendUnit: this.legendUnit,
			angleAxisMin: this.angleAxisMin,
			color: this.color,
			legendLeft: this.legendLeft,
			orient: this.orient,
			legendItemGap: this.legendItemGap

		};
	},
	beforeDestroy() {
		if (this.polarBarChart) {
			window.removeEventListener('resize', this.polarBarChart.resize)
			this.polarBarChart.dispose(); // 销毁实例
		}
	}
}
</script>
<style lang="less" scoped>
.polar-bar {
	width: 558px;
	height: 190px;
}
</style>
